<!-- @format -->

<template>
  <view class="comp-tabbar">
    <view
      v-for="(item, index) in tabbarList"
      :key="index"
      class="comp-tabbar-item"
      @click="handleTabClick(item)"
    >
      <view class="comp-tabbar-icon">
        <image
          :src="getIconSrc(item)"
          class="icon-image"
          mode="aspectFit"
        ></image>
      </view>
      <view
        class="comp-tabbar-label"
        :style="{
          color: currentPath === item.path ? item.colorSelect : item.color,
        }"
      >
        {{ item.label }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  import { onShow } from '@dcloudio/uni-app';

  interface TabbarItem {
    label: string;
    path: string;
    icon: string;
    iconSelect: string;
    color: string;
    colorSelect: string;
  }

  interface Props {
    list: TabbarItem[];
    // 图标路径前缀，默认为空，可以根据实际情况设置
    iconBasePath?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    list: () => [],
    iconBasePath: '/static/tabbar/',
  });

  // 当前路径
  const currentPath = ref('');

  // 计算属性获取tabbar列表
  const tabbarList = computed(() => {
    return props.list;
  });

  // 获取图标路径
  const getIconSrc = (item: TabbarItem) => {
    // 根据当前路径判断使用哪个图标
    const iconName =
      currentPath.value === item.path ? item.iconSelect : item.icon;
    // 返回完整的图标路径
    return `${props.iconBasePath}${iconName}.png`;
  };

  // 处理点击事件
  const handleTabClick = (item: TabbarItem) => {
    if (currentPath.value !== item.path) {
      // 使用uni-app的路由API
      uni.switchTab({
        url: item.path,
        fail: () => {
          // 如果不是tabbar页面，使用navigateTo
          uni.navigateTo({
            url: item.path,
          });
        },
      });
    }
  };

  // 获取当前页面路径
  const getCurrentPath = () => {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    // 获取当前页面路径
    if (currentPage) {
      const route = currentPage.route;
      currentPath.value = '/' + route;
    }
  };

  onMounted(() => {
    // 初始化时获取当前路径
    getCurrentPath();
  });

  // 监听页面显示
  onShow(() => {
    getCurrentPath();
  });
</script>

<style scoped lang="scss">
  .comp-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom); /* 适配iPhone X等机型 */
    /* 适配小程序和APP */
    /* #ifdef MP || APP-PLUS */
    padding-bottom: 0;
    /* #endif */

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      flex: 1;
    }

    &-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 6rpx;

      .icon-image {
        width: 48rpx;
        height: 48rpx;
      }
    }

    &-label {
      font-size: 24rpx;
      line-height: 1;
    }
  }
</style>
